<?php
use yii\helpers\Url;
/* @var $this yii\web\View */
/* @var $products */

$this->title = '微信点餐（测试）';
//这个变量在布局页脚处使用：本页面自定义引入的css与js
$this->params['pageJs'] = '<script src="'.Url::to('@web/js/ui-index.js').'"></script>';
$this->params['pageCss'] = '<link href="'.Url::to('@web/css/ui-index.css').'" rel="stylesheet">';
?>
<script>
    let apiGetProducts = "<?= Url::to(['restful/product/index']) ?>"
    let apiUpdateCart = "<?= Url::to(['restful/cart/update']) ?>"
    let apiGetCart = "<?= Url::to(['restful/cart/index']) ?>"
</script>
<div class="ui-index">
    <div id="app" v-cloak v-loading="loading" element-loading-background="rgba(255, 255, 255, 0)">
        <div>
            <!--v-for-->
            <!--待选商品列表区的一行row-->
            <el-row :gutter="5" v-for="product in products" :key="product.id">
                <!--商品图片（左列）-->
                <el-col :span="8">
                    <div class="grid-content product_img_box">
                        <img class="product_list_img" :src="'images/' + product.product_img" alt="">
                    </div>
                </el-col>
                <!--商品信息（右列）-->
                <el-col :span="16">
                    <div class="grid-content product_info_box">
                        <!--商品名称及备注-->
                        <div>
                            <div class="product_title">{{product.product_name}}</div>
                            <div class="product_comment">{{product.product_description}}</div>
                        </div>
                        <!--商品价格与数量-->
                        <div style="display: flex;justify-content: space-between;line-height: 35px">
                            <!--商品价格-->
                            <div class="product_price"><span style="font-size: 12px">￥</span><span>{{product.product_price}}</span>元</div>
                            <!--加减按钮与数量-->
                            <div style="font-size: 20px;color: #409EFF">
                            <span v-show="cart[product.id]">
                                <span class="el-icon-remove-outline" @click="updateCart({product_id:product.id},'sub')"></span>
                                <span style="color: #606266;">{{cart[product.id]?cart[product.id].quantity:0}}</span>
                            </span>
                                <span class="el-icon-circle-plus"  @click="updateCart({product_id:product.id},'add')"></span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--mask-->
        <template>
            <transition name="el-zoom-in-top">
                <div v-show="showCart" class="mask" @click="showCart = false">.el-zoom-in-bottom</div>
            </transition>
        </template>
        <!--页脚：结算操作-->
        <div class="footer">
            <!--购物车弹出框容器-->
            <div style="position: absolute;left: 0;bottom: 53px;width: 100%">
                <!--弹出框动画组件-->
                <template>
                    <transition name="el-zoom-in-bottom">
                        <div v-show="showCart" class="transition-box">
                            <ul>
                                <li v-show="Object.keys(this.cart).length === 0">购物车是空的，赶紧去点餐吧！</li>

                                <!--v-for-->
                                <li class="cart-line" v-for="productInfo in cart" :key="productInfo.id">
                                    <!--商品名称-->
                                    <div>{{productInfo.product.product_name}}</div>
                                    <!--加减按钮-->
                                    <div style="font-size: 20px;color: #409EFF;">
                                        <span class="el-icon-remove-outline" @click="updateCart({product_id:productInfo.product_id},'sub')"></span>
                                        <span style="color: #606266;">{{productInfo.quantity}}</span>
                                        <span class="el-icon-circle-plus" @click="updateCart({product_id:productInfo.product_id},'add')"></span>
                                    </div>
                                </li>


                            </ul>
                        </div>
                    </transition>
                </template>
            </div>
            <!--购物车按钮-->
            <div style="position: absolute;left: 12px;bottom: 12px;">
                <img @click="showCart = !showCart" src="images/icons/cart.png" alt="" style="width: 50px;height: 50px">
            </div>
            <!--页脚内容区-->
            <div style="display: flex;flex-direction: row">
                <!--价格合计-->
                <div style="width: 70%;height: 100%;padding-left:70px;padding-top:5px;display: flex;flex-direction: column">
                    <div class="product_price"><span>￥</span><span>{{total.price}}</span></div>
                    <div class="product_comment">共<span>{{total.quantity}}</span>件</div>
                </div>
                <!--下单按钮-->
                <div style="width: 30%;height: 100%;line-height: 53px;background:#F56C6C;color: white;text-align: center ">
                    去下单
                </div>
            </div>
        </div>
    </div>
</div>
